<template>
  <div>
    <div><h2>系统进程</h2></div>
    <div class="tips">系统中正在运行的进程概况和它们的状态信息。</div>
    <div>
      <el-card>
        <el-table :data="processData" style="width: 100%" stripe>
          <el-table-column prop="id" label="PID" width="120"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="120">
          </el-table-column>
          <el-table-column prop="command" label="命令" width="180">
          </el-table-column>
          <el-table-column prop="useCpu" label="CPU使用率"> </el-table-column>
          <el-table-column prop="useMem" label="内存使用率"> </el-table-column>
          <el-table-column label="挂起" width="100">
            <template>
              <el-button class="hangUp">挂起</el-button>
            </template>
          </el-table-column>
          <el-table-column label="关闭" width="100">
            <template>
              <el-button class="closeUp">关闭</el-button>
            </template>
          </el-table-column>
          <el-table-column label="强制关闭" width="120">
            <template>
              <el-button class="closed">强制关闭</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      processData: [
        {
          id: 1,
          username: "root",
          command: "sbin/proc",
          useCpu: "0%",
          useMem: "0%",
        },
      ],
    };
  },
};
</script>

<style scoped>
.closed {
  background: #fb6340;
  color: #fff;
}
.closeUp {
  background: #2dce89;
  color: #fff;
}
.hangUp {
  background: #825ee4;
  color: #fff;
}
.el-table-column {
  align-items: center;
  text-align: center;
}
.tips {
  padding: 0.5rem;
  color: #999;
  font-size: small;
}
</style>